
// 定义数组 存储 图片信息
const arr = [
    {id:1,width:1349,height:550,size:'300KB',src:'1.jpg'},
    {id:2,width:1349,height:550,size:'300KB',src:'2.jpg'},
    {id:3,width:1349,height:550,size:'300KB',src:'3.jpg'},
    {id:4,width:1349,height:550,size:'300KB',src:'4.jpg'},
];
// 获取标签对象

// 父级div
const oBanner = document.querySelector('.banner');
// 父级div 中 ul 标签
const oUl = oBanner.querySelector('ul');
// 父级div 中 ol 标签
const oOl = oBanner.querySelector('ol');

// 定义全局变量储存数据

// ul中的li
let oUlLis ;
// ol中的li
let oOlLis ;
// li的宽度
let liWidth ;
// 原始数组单元个数
let length = arr.length ;
// 存储定时器
let time = 0;
// 定义变量,存储显示内容对应的li的索引下标
// 起始值 是 1 也就是起始显示 索引下标是1 的第二个li的内容
let index = 1;
// 定义变量 控制 定时器执行 默认存储true
let bool = true;



// 调用函数 动态渲染生成页面
setLi( arr );
// 调用函数 自动轮播 
autoLoop()
// 调用函数 鼠标的移入移除
setMouse();
// 调用函数 设定点击效果
setClick();
// 调用函数 浏览器最小化
hide();



// 定义函数 动态生成页面
// 参数是 存储图片信息的数据数组
function setLi( array ){
    // 定义 字符串 存储 ul>li标签
    let ulStr = '';
    // 定义 字符串 存储 ol>li标签
    let olStr = '';

    // 循环遍历 数组 生成 字符串内容
    // item 就是 数组中 存储的对象
    array.forEach((item,key)=>{
        // ul,li
        // ulStr += `<li><img src="../static/lunbotu/${item.src}"></li>`;
        ulStr +=`<li><img src="../img/${item.src}"></li>`;

        // ol,li
        olStr += key === 0 ? `<li name="olli" num="${key}" class="active"></li>` : `<li name="olli" num="${key}"></li>`;
    })

    // 写入ul和ol标签
    oUl.innerHTML = ulStr;
    oOl.innerHTML = olStr;

    // 获取 ul 中 原始 的 li 标签
    oUlLis = oUl.querySelectorAll('li');
    // 获取 ol 中 原始 的 li 标签
    oOlLis = oOl.querySelectorAll('li');

    // 获取一个li的宽度 赋值给全局变量
    liWidth = parseInt( myGetStyle( oUlLis[0] , 'width' ) );

    // 克隆 原始 ul中 第一个li
    const cloneFirst = oUlLis[0].cloneNode(true);
    // 克隆 原始 ul中 最后一个li
    const cloneLast = oUlLis[oUlLis.length-1].cloneNode(true);

    // 将克隆的原始第一个,写入 ul的最后
    oUl.appendChild( cloneFirst );
    // 将克隆的原始最后一个,写入 ul的起始 也就是第一个之前
    oUl.insertBefore( cloneLast , oUlLis[0] );

    // 重新设定 ul 标签的宽度  一个li的宽度*克隆之后li的个数(原始数组个数+2)
    oUl.style.width = liWidth * (length+2) + 'px';

    // 默认显示 当前克隆之后 ul 中 第二个li 也就是原始的第一个li
    // ul标签 向左 定义 位移一个 li宽度
    oUl.style.left = -liWidth + 'px';

}


// 自动轮播函数
function autoLoop(){
    // 赋值 存储 定时器
    time = setInterval(() => {
        // 先给 index++ 也就是 要显示下个li
        index++;

        // index数值改变 就根据 新的 index值 设定 焦点样式
        setOlStyle();

        // 设定ul的定位 是 -index * li的宽度
        // 通过 运动函数实现
        move( oUl , { left: -index*liWidth } , loopEnd )

    }, 2000);
}

// move() 运动函数停止 执行的函数程序
function loopEnd(){
    //  1, 判断 index 的数值
    //  如果是 当前 最后一个li对应的 索引下标
    //  与 原始数组 length+1
    if( index === length+1 ){
        // 定位ul, 显示 当前 第二个li 也就是 index索引下标是 1
        index = 1;
        // 定位是 瞬间执行的 
        oUl.style.left = -index*liWidth + 'px';

    // 如果 index 是 0 也就是 第一个li 切换至 倒数第二个li
    }else if(index === 0){
        // 定位ul, 显示 当前 第二个li 也就是 index索引下标是 1
        index = length;
        // 定位是 瞬间执行的 
        oUl.style.left = -index*liWidth + 'px';
    }
    
    //  2, 设定 ol>li 样式
    // setOlStyle();

    //  3, 运动停止 变量再次赋值 true 可以再次调用运动函数
    bool = true;
}

// 设定 ol>li 样式
function setOlStyle(){
    // 循环遍历 所有 ol>li
    // item 是 ol>li 标签
    // key 是 索引下标
    oOlLis.forEach( (item,key)=>{
        // 给所有 ol>li 清除 class active
        item.classList.remove('active');

        // 给 索引下标 和 index-1 相同的 ol>li标签 
        // 添加 class active
        if(key === index-1){
            item.classList.add('active');

        // index 是 最后一个 li的索引下标 
        // 也就是 length+1
        }else if( index === length+1){
            // 给 第一个 ol>li 添加样式
            oOlLis[0].classList.add('active');

        // index 是 第一个 li的索引下标 
        // 也就是 0    
        }else if( index === 0){
            // 给 最后一个 ol>li 添加样式
            oOlLis[length-1].classList.add('active');
        }
    })
    
}


// 鼠标移入移出函数
function setMouse(){
    // 给 父级 div 添加事件

    // 鼠标移入
    oBanner.addEventListener('mouseenter' , ()=>{
        // 清除定时器
        clearInterval( time );
    })

    // 鼠标移出
    oBanner.addEventListener('mouseleave' , ()=>{
        // 再次调用自动轮播函数
        autoLoop();
    })
}


// 点击事件
function setClick(){
    oBanner.addEventListener('click' , e=>{
        // 如果 e.target 的 name属性值是 left 
        // 点击的是 左按钮
        if( e.target.getAttribute('name') === 'left' ){
            // 防止点击过快
            if( !bool ) return;
            bool = false;


            // 点击的是 左按钮 index 执行 --操作
            index--;

            // index数值改变 就根据 新的 index值 设定 焦点样式
            setOlStyle();


            // 调用 move() 运动函数 跟根据新的 index数值运动切换ul定位
            move( oUl , { left: -index*liWidth } , loopEnd );
        
        // 点击的是 右按钮
        }else if( e.target.getAttribute('name') === 'right' ){
            // 防止点击过快
            if( !bool ) return;
            bool = false;

            // 点击的是 左按钮 index 执行 ++操作
            index++;

            // index数值改变 就根据 新的 index值 设定 焦点样式
            setOlStyle();

            // 调用 move() 运动函数 跟根据新的 index数值运动切换ul定位
            move( oUl , { left: -index*liWidth } , loopEnd )

        // 点击的是 ol>li 
        } else if( e.target.getAttribute('name') === 'olli' ){
            // 防止点击过快
            if( !bool ) return;
            bool = false;


            // 获取点击对象e.target  num属性的属性值
            // 加1 赋值给 index 
            // 获取的属性值 是 字符串类型 先转化为数值类型
            index = e.target.getAttribute('num')-0+1;

            // index数值改变 就根据 新的 index值 设定 焦点样式
            setOlStyle();

            // 调用 move() 运动函数 跟根据新的 index数值运动切换ul定位
            move( oUl , { left: -index*liWidth } , loopEnd )
        } 
    })
}


// 浏览器最小化事件
function hide(){
    // 给整个文档绑定事件

    // 当浏览器显示状态改变时触发的程序
    document.addEventListener( 'visibilitychange' , ()=>{
        // 当 浏览器 显示状态 为 显示时
        if( document.visibilityState === 'visible' ){
            // 调用 自动轮播函数
            autoLoop();

        // 当 浏览器 显示状态 为 隐藏时
        }else if( document.visibilityState === 'hidden' ){
            clearInterval(time);
        }
    })
}

